import Link from "next/link";

export default function Nav() {
  return (
    <header className="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b border-black/5 dark:border-white/10">
      <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-background text-foreground px-3 py-2 rounded">
        Skip to main content
      </a>
      <div className="mx-auto max-w-screen-xl px-6 h-14 flex items-center justify-between">
        <Link href="/" className="font-semibold">Landing</Link>
        <nav className="flex items-center gap-5 text-sm" aria-label="Main navigation">
          <a href="#what" className="hover:underline underline-offset-4">Core Value</a>
          <a href="#how" className="hover:underline underline-offset-4">How It Works</a>
          <a href="#features" className="hover:underline underline-offset-4">Features</a>
          <a href="#faq" className="hover:underline underline-offset-4">FAQ</a>
        </nav>
      </div>
    </header>
  );
}